<script lang="ts" setup>
import { Icon } from "@vicons/utils";
import { AssignmentTurnedInTwotone } from "@vicons/material";
import { useRouter, useRoute } from "vue-router";
import * as orderApi from "@/api/train/order";
import VConsole from "vconsole";

const router = useRouter();
const route = useRoute();

const vConsole = new VConsole();

const {
  sub_mch_id: subMchId, // 特约商户号
  out_trade_no: outTradeNo, // 商户订单号
  check_code: checkCode, // md5 校验码
} = route.query as Record<any, string>;

// 获取订单信息
const orderInfo = ref<OrderInfoResp | null>(null);
orderApi.getOrderByOrderNo(outTradeNo).then((res) => {
  orderInfo.value = res.data;
});

const handleGoBack = (orderId: OrderInfoResp["id"]) => {
  router.replace(`/order/${orderId}`);
};
</script>

<template>
  <div class="min-h-screen py-16 flex flex-col items-center">
    <Icon size="56" color="#22c55e">
      <AssignmentTurnedInTwotone />
    </Icon>
    <div class="my-2 text-lg c-green-500">支付成功</div>
    <div v-if="orderInfo" class="mb-2 text-lg c-gray-7">
      ￥{{ orderInfo.orderPrice / 100 }}
    </div>
    <div
      v-if="orderInfo"
      class="mt-2 w-3/5 py-3 bg-green-500 c-light-1 text-center rd-2"
      @click="handleGoBack(orderInfo.id)"
    >
      查看支付详情
    </div>
  </div>
</template>
